<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Material Admin - Typography</title>

		<!-- BEGIN META -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="your,keywords">
		<meta name="description" content="Short explanation about this website">
		<!-- END META -->

		<!-- BEGIN STYLESHEETS -->
		<link href='http://fonts.useso.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/bootstrap.css?1422792965" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/materialadmin.css?1425466319" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/font-awesome.min.css?1422529194" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/material-design-iconic-font.min.css?1421434286" />
		<!-- END STYLESHEETS -->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="../../assets/js/libs/utils/html5shiv.js?1403934957"></script>
		<script type="text/javascript" src="../../assets/js/libs/utils/respond.min.js?1403934956"></script>
		<![endif]-->
	</head>
	<body class="menubar-hoverable header-fixed menubar-pin ">

		<!-- BEGIN HEADER-->
		<header id="header" >
			<div class="headerbar">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="headerbar-left">
					<ul class="header-nav header-nav-options">
						<li class="header-nav-brand" >
							<div class="brand-holder">
								<a href="../../html/dashboards/dashboard.html">
									<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
								</a>
							</div>
						</li>
						<li>
							<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
								<i class="fa fa-bars"></i>
							</a>
						</li>
					</ul>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="headerbar-right">
					<ul class="header-nav header-nav-options">
						<li>
							<!-- Search form -->
							<form class="navbar-search" role="search">
								<div class="form-group">
									<input type="text" class="form-control" name="headerSearch" placeholder="Enter your keyword">
								</div>
								<button type="submit" class="btn btn-icon-toggle ink-reaction"><i class="fa fa-search"></i></button>
							</form>
						</li>
						<li class="dropdown hidden-xs">
							<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default" data-toggle="dropdown">
								<i class="fa fa-bell"></i><sup class="badge style-danger">4</sup>
							</a>
							<ul class="dropdown-menu animation-expand">
								<li class="dropdown-header">Today's messages</li>
								<li>
									<a class="alert alert-callout alert-warning" href="javascript:void(0);">
										<img class="pull-right img-circle dropdown-avatar" src="../../assets/img/avatar2.jpg?1404026449" alt="" />
										<strong>Alex Anistor</strong><br/>
										<small>Testing functionality...</small>
									</a>
								</li>
								<li>
									<a class="alert alert-callout alert-info" href="javascript:void(0);">
										<img class="pull-right img-circle dropdown-avatar" src="../../assets/img/avatar3.jpg?1404026799" alt="" />
										<strong>Alicia Adell</strong><br/>
										<small>Reviewing last changes...</small>
									</a>
								</li>
								<li class="dropdown-header">Options</li>
								<li><a href="../../html/pages/login.html">View all messages <span class="pull-right"><i class="fa fa-arrow-right"></i></span></a></li>
								<li><a href="../../html/pages/login.html">Mark as read <span class="pull-right"><i class="fa fa-arrow-right"></i></span></a></li>
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
						<li class="dropdown hidden-xs">
							<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default" data-toggle="dropdown">
								<i class="fa fa-area-chart"></i>
							</a>
							<ul class="dropdown-menu animation-expand">
								<li class="dropdown-header">Server load</li>
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Today</strong></span>
											<strong class="pull-right">93%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-danger" style="width: 93%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Yesterday</strong></span>
											<strong class="pull-right">30%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-success" style="width: 30%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Lastweek</strong></span>
											<strong class="pull-right">74%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-warning" style="width: 74%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
					</ul><!--end .header-nav-options -->
					<ul class="header-nav header-nav-profile">
						<li class="dropdown">
							<a href="javascript:void(0);" class="dropdown-toggle ink-reaction" data-toggle="dropdown">
								<img src="../../assets/img/avatar1.jpg?1403934956" alt="" />
								<span class="profile-info">
									Daniel Johnson
									<small>Administrator</small>
								</span>
							</a>
							<ul class="dropdown-menu animation-dock">
								<li class="dropdown-header">Config</li>
								<li><a href="../../html/pages/profile.html">My profile</a></li>
								<li><a href="../../html/pages/blog/post.html">My blog <span class="badge style-danger pull-right">16</span></a></li>
								<li><a href="../../html/pages/calendar.html">My appointments</a></li>
								<li class="divider"></li>
								<li><a href="../../html/pages/locked.html"><i class="fa fa-fw fa-lock"></i> Lock</a></li>
								<li><a href="../../html/pages/login.html"><i class="fa fa-fw fa-power-off text-danger"></i> Logout</a></li>
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
					</ul><!--end .header-nav-profile -->
					<ul class="header-nav header-nav-toggle">
						<li>
							<a class="btn btn-icon-toggle btn-default" href="#offcanvas-search" data-toggle="offcanvas" data-backdrop="false">
								<i class="fa fa-ellipsis-v"></i>
							</a>
						</li>
					</ul><!--end .header-nav-toggle -->
				</div><!--end #header-navbar-collapse -->
			</div>
		</header>
		<!-- END HEADER-->

		<!-- BEGIN BASE-->
		<div id="base">

			<!-- BEGIN OFFCANVAS LEFT -->
			<div class="offcanvas">
			</div><!--end .offcanvas-->
			<!-- END OFFCANVAS LEFT -->

			<!-- BEGIN CONTENT-->
			<div id="content">
				<section>
					<div class="section-header">
						<ol class="breadcrumb">
							<li class="active">Typography</li>
						</ol>
					</div>
					<div class="section-body contain-lg">

						<!-- BEGIN INTRO -->
						<div class="row">
							<div class="col-lg-12">
								<h1 class="text-primary">Typography</h1>
							</div><!--end .col -->
							<div class="col-lg-8">
								<article class="margin-bottom-xxl">
									<p class="lead">
										Material Admin uses Roboto as the standard typeface.
										Roboto has been refined extensively to work across the wider set of supported platforms.
										It is slightly wider and rounder, giving it greater clarity and making it more optimistic.
									</p>
									<p class="lead">
										Roboto supports the languages that use the Latin, Greek, and Cyrillic scripts.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END INTRO -->

						<!-- BEGIN SECTION INTRO -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Font styles</h2>
							</div>
						</div><!--end .row -->
						<!-- END SECTION INTRO -->

						<!-- BEGIN STYLES - HEADINGS -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Typographic scale & basic styles</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										Too many type sizes and styles at once can wreck any layout.
										A typographic scale has a limited set of type sizes that work well together along with the layout grid.
										The basic set of styles are based on a typographic scale of 12, 13, 15, 20, 24 and 34.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<h1><small class="pull-left width-1">h1</small> Normal 34px</h1>
										<h2><small class="pull-left width-1">h2</small> Normal 24px</h2>
										<h3><small class="pull-left width-1">h3</small> Medium 20px</h3>
										<h4><small class="pull-left width-1">h4</small> Medium 15px</h4>
										<h5><small class="pull-left width-1">h5</small> Medium 13px</h5>
										<h6><small class="pull-left width-1">h6</small> Medium 12px</h6>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Basic headings</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END STYLES - HEADINGS -->

						<!-- BEGIN STYLES - SCALE -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Scale</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										Sometimes you need to scale up or down the text.
										There are 7 classes you can use for this purpose.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<p class="text-xxxxl">Text xxxx-large</p>
										<p class="text-xxxl">Text xxx-large</p>
										<p class="text-xxl">Text xx-large</p>
										<p class="text-xl">Text x-large</p>
										<p class="text-lg">Text large</p>
										<p>Text regular</p>
										<p class="text-sm">Text small</p>
										<p class="text-xs">Text x-small</p>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Font style classes</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END STYLES - SCALE -->

						<!-- BEGIN STYLES - WEIGHT -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Weight</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										The weight styles are available through classes so you can use it easily.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<h3 class="text-light">Light text</h3>
										<h3 class="text-normal">Normal text</h3>
										<h3 class="text-medium">Medium text</h3>
										<h3 class="text-bold">Bold text</h3>
										<h3 class="text-ultra-bold">Ultra bold text</h3>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Font weight classes</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END STYLES - WEIGHT -->

						<!-- BEGIN STYLES - COMBINATIONS -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Combinations</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										When you combine the different font classes with the heading classes, you can get the following Material Design styles.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<table class="table table-condensed table-no-border">
											<tr>
												<td class="text-default-light">h1<br/>.text-xxxl<br/>.text-light</td>
												<td><h1><span class="text-xxxl text-light">Display 4</span></h1></td>
											</tr>
											<tr>
												<td class="text-default-light">h2<br/>.text-xxl</td>
												<td><h2><span class="text-xxl">Display 3</span></h2></td>
											</tr>
											<tr>
												<td class="text-default-light">h3<br/>.text-xxl<br/>.text-normal</td>
												<td><h3><span class="text-xxl text-normal">Display 2</span></h3></td>
											</tr>
											<tr>
												<td class="text-default-light">h1</td>
												<td><h1>Display 1</h1></td>
											</tr>
											<tr>
												<td class="text-default-light">h2</td>
												<td><h2>Headline</h2></td>
											</tr>
											<tr>
												<td class="text-default-light">h3</td>
												<td><h3>Title</h3></td>
											</tr>
											<tr>
												<td class="text-default-light">h4</td>
												<td><h4>Subhead</h4></td>
											</tr>
											<tr>
												<td class="text-default-light">Default</td>
												<td>Body</td>
											</tr>
											<tr>
												<td class="text-default-light">.text-caption</td>
												<td><span class="text-caption no-margin">Caption</span></td>
											</tr>
										</table>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Combining classes</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END STYLES -->

						<hr class="ruler-xxl"/>

						<!-- BEGIN PARAGRAPH -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Body copy</h2>
							</div><!--end .col -->
							<div class="col-lg-12">
								<h4>Paragraphs</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										The default font-size is 13px, with a line-height of 24px.
										This is applied to the <code>&lt;body&gt;</code> and all paragraphs.
									</p>
									<p>
										In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their computed line-height (12px by default).
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor <strong>strong</strong>.</p>
										<p>
											Maecenas sed diam eget risus varius blandit sit amet non magna. <em>Donec id elit non mi porta gravida at eget metus.</em> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br/>
											<small>This line of text is meant to be treated as fine print.</small>
										</p>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Paragraphs</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END PARAGRAPH -->

						<!-- BEGIN LEAD PARAGRAPH -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Lead paragraph</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										Make a paragraph stand out by adding <code>.lead</code>.
										It will increase font-size, line-height and the bottom margin.
										The font receives a thin weight weight.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
										<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor.</p>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Paragraph with leading text</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END LEAD PARAGRAPH -->

						<!-- BEGIN LEAD BLOCKQUOTES -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Blockquote</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										For quoting blocks of content from another source within your document.
										Add a <code>&lt;footer&gt;</code> for identifying the source.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<blockquote>
											<p>Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.</p>
											<footer>Albert Einstein</footer>
										</blockquote>
										<blockquote class="blockquote-reverse">
											<p>Don't wait around for other people to be happy for you. Any happiness you get you've got to make yourself.</p>
											<footer>Alice Walker</footer>
										</blockquote>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Blockquote</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END LEAD BLOCKQUOTES -->

						<hr class="ruler-xxl"/>

						<!-- BEGIN COLORS -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Colors</h2>
							</div><!--end .col -->
							<div class="col-lg-3">
								<article class="margin-bottom-xxl">
									<p>
										Convey meaning through color with the emphasis classes.
										These may also be applied to links and will darken on hover.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-lg-2 col-md-3 col-xs-6">
								<div class="card">
									<div class="card-body style-default-dark height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-default-dark">.text-default-dark</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-gray-dark height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-default">.text-default</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-gray-light height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-default-light">.text-default-light</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-default-bright height-1"></div>
									<div class="card-body style-gray-light small-padding text-center">
										<span class="text-default-bright">.text-default-bright</span>
									</div>
								</div><!--end .card -->
							</div><!--end .col -->
							<div class="col-lg-2 col-md-3 col-xs-6">
								<div class="card">
									<div class="card-body style-primary-dark height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-primary-dark">.text-primary-dark</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-primary height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-primary">.text-primary</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-primary-light height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-primary-light">.text-primary-light</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-primary-bright height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-primary-bright">.text-primary-bright</span>
									</div>
								</div><!--end .card -->
							</div><!--end .col -->
							<div class="col-lg-2 col-md-3 col-xs-6">
								<div class="card">
									<div class="card-body style-accent-dark height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-accent-dark">.text-accent-dark</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-accent height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-accent">.text-accent</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-accent-light height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-accent-light">.text-accent-light</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-accent-bright height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-accent-bright">.text-accent-bright</span>
									</div>
								</div><!--end .card -->
							</div><!--end .col -->
							<div class="col-lg-2 col-md-3 col-xs-6">
								<div class="card">
									<div class="card-body style-danger height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-danger">.text-danger</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-warning height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-warning">.text-warning</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-success height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-success">.text-success</span>
									</div>
								</div><!--end .card -->
								<div class="card">
									<div class="card-body style-info height-1"></div>
									<div class="card-body small-padding text-center">
										<span class="text-info">.text-info</span>
									</div>
								</div><!--end .card -->
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END COLORS -->

						<hr class="ruler-xxl"/>

						<!-- BEGIN LIST -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Lists</h2>
							</div><!--end .col -->
							<div class="col-lg-12">
								<h4>Typographic scale & basic styles</h4>
							</div><!--end .col -->
							<div class="col-lg-3">
								<article class="margin-bottom-xxl">
									<p>
										The weight styles are available through classes so you can use it easily.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-lg-4 col-sm-6">
								<div class="card">
									<div class="card-body">
										<ul>
											<li>Lorem ipsum dolor sit amet</li>
											<li>Facilisis in pretium nisl aliquet</li>
											<li>Integer molestie lorem at massa</li>
											<li>Facilisis in pretium nisl aliquet</li>
											<li>Nulla volutpat aliquam velit
												<ul>
													<li>Phasellus iaculis neque</li>
													<li>Purus sodales ultricies</li>
													<li>Ac tristique libero volutpat</li>
												</ul>
											</li>
											<li>Aenean sit amet erat nunc</li>
											<li>Eget porttitor lorem</li>
										</ul>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Unordered list</em>
							</div><!--end .col -->
							<div class="col-lg-4 col-sm-6">
								<div class="card">
									<div class="card-body">
										<ol>
											<li>Lorem ipsum dolor sit amet</li>
											<li>Consectetur adipiscing elit</li>
											<li>Integer molestie lorem at massa</li>
											<li>Facilisis in pretium nisl aliquet</li>
											<li>Nulla volutpat aliquam velit</li>
											<li>Faucibus porta lacus fringilla vel</li>
											<li>Aenean sit amet erat nunc</li>
											<li>Eget porttitor lorem</li>
											<li>Integer molestie lorem at massa</li>
											<li>Facilisis in pretium nisl aliquet</li>
										</ol>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Ordered list</em>
							</div><!--end .col -->
							<div class="col-lg-offset-4 col-lg-4 col-sm-6">
								<div class="card">
									<div class="card-body">
										<ul class="list-unstyled">
											<li>Lorem ipsum dolor sit amet</li>
											<li>Consectetur adipiscing elit</li>
											<li>Integer molestie lorem at massa</li>
											<li>Nulla volutpat aliquam velit
												<ul>
													<li>Phasellus iaculis neque</li>
													<li>Ac tristique libero volutpat at</li>
												</ul>
											</li>
											<li>Faucibus porta lacus fringilla vel</li>
											<li>Aenean sit amet erat nunc</li>
										</ul>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Unstyled list</em>
							</div><!--end .col -->
							<div class="col-lg-4 col-sm-6">
								<div class="card">
									<div class="card-body">
										<ul class="list-divided">
											<li>Lorem ipsum dolor sit amet</li>
											<li>Consectetur adipiscing elit</li>
											<li>Integer molestie lorem at massa</li>
											<li>Faucibus porta lacus fringilla vel</li>
											<li>Aenean sit amet erat nunc</li>
										</ul>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Divided list</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END LIST -->

						<!-- BEGIN DESCRIPTION LISTS -->
						<div class="row">
							<div class="col-lg-offset-4 col-lg-8">
								<div class="card">
									<div class="card-body">
										<dl>
											<dt>Description lists</dt>
											<dd>A description list is perfect for defining terms.</dd>
											<dt>Euismod</dt>
											<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
											<dd>Donec id elit non mi porta gravida at eget metus.</dd>
											<dt>Malesuada porta</dt>
											<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
										</dl>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Regular description</em>
							</div><!--end .col -->
							<div class="col-lg-offset-4 col-lg-8">
								<div class="card">
									<div class="card-body">
										<dl class="dl-horizontal">
											<dt>Description lists</dt>
											<dd>A description list is perfect for defining terms.</dd>
											<dt>Euismod</dt>
											<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
											<dd>Donec id elit non mi porta gravida at eget metus.</dd>
											<dt>Malesuada porta</dt>
											<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
											<dt>Felis euismod semper eget lacinia</dt>
											<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
										</dl>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Horizontal description</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END DESCRIPTION LISTS -->

						<hr class="ruler-xxl"/>

						<!-- BEGIN COLUMNS INTRO -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Responsive text columns</h2>
							</div><!--end .col -->
							<div class="col-lg-8">
								<article class="margin-bottom-xxl">
									<p>
										If a line of text is too long, the user’s eye will have a hard time focusing on the text.
										This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
									</p>
									<p>
										To regulate the length of a line of text, you can use the text columns classes.
										As the screen becomes smaller, there will be fewer columns.
										Therefore, the text remains readable.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END COLUMNS INTRO -->

						<!-- BEGIN SMALL COLUMNS -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Small text columns</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									The class <code>.text-columns-sm</code> will divide the text in the following columns:
									<ul>
										<li>4 columns on large screens</li>
										<li>3 columns on medium screens</li>
										<li>2 columns on small screens</li>
										<li>1 column on extra small screens</li>
									</ul>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<div class="text-columns-sm">
											<p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
											<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Small text columns</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END SMALL COLUMNS -->

						<!-- BEGIN REGULAR COLUMNS -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Regular text columns</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									The class <code>.text-columns</code> will divide the text in the following columns:
									<ul>
										<li>3 columns on large screens</li>
										<li>2 columns on medium screens</li>
										<li>1 column on small screens</li>
										<li>1 column on extra small screens</li>
									</ul>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<div class="text-columns">
											<p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
											<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Regular text columns</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END REGULAR COLUMNS -->

						<!-- BEGIN LARGE COLUMNS -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Large text columns</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									The class <code>.text-columns-lg</code> will divide the text in the following columns:
									<ul>
										<li>2 columns on large screens</li>
										<li>1 column on medium screens</li>
										<li>1 column on small screens</li>
										<li>1 column on extra small screens</li>
									</ul>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-body">
										<div class="text-columns-lg">
											<p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
											<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Large text columns</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END LARGE COLUMNS -->

					</div><!--end .section-body -->
				</section>
			</div><!--end #content-->
			<!-- END CONTENT -->

			<!-- BEGIN MENUBAR-->
			<div id="menubar" class="menubar-inverse ">
				<div class="menubar-fixed-panel">
					<div>
						<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
							<i class="fa fa-bars"></i>
						</a>
					</div>
					<div class="expanded">
						<a href="../../html/dashboards/dashboard.html">
							<span class="text-lg text-bold text-primary ">MATERIAL&nbsp;ADMIN</span>
						</a>
					</div>
				</div>
				<div class="menubar-scroll-panel">

					<!-- BEGIN MAIN MENU -->
					<ul id="main-menu" class="gui-controls">

						<!-- BEGIN DASHBOARD -->
						<li>
							<a href="../../html/dashboards/dashboard.html" >
								<div class="gui-icon"><i class="md md-home"></i></div>
								<span class="title">Dashboard</span>
							</a>
						</li><!--end /menu-li -->
						<!-- END DASHBOARD -->

						<!-- BEGIN EMAIL -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="md md-email"></i></div>
								<span class="title">Email</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/mail/inbox.html" ><span class="title">Inbox</span></a></li>
								<li><a href="../../html/mail/compose.html" ><span class="title">Compose</span></a></li>
								<li><a href="../../html/mail/reply.html" ><span class="title">Reply</span></a></li>
								<li><a href="../../html/mail/message.html" ><span class="title">View message</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END EMAIL -->

						<!-- BEGIN DASHBOARD -->
						<li>
							<a href="../../html/layouts/builder.html" >
								<div class="gui-icon"><i class="md md-web"></i></div>
								<span class="title">Layouts</span>
							</a>
						</li><!--end /menu-li -->
						<!-- END DASHBOARD -->

						<!-- BEGIN UI -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="fa fa-puzzle-piece fa-fw"></i></div>
								<span class="title">UI elements</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/ui/colors.html" ><span class="title">Colors</span></a></li>
								<li><a href="../../html/ui/typography.html" class="active"><span class="title">Typography</span></a></li>
								<li><a href="../../html/ui/cards.html" ><span class="title">Cards</span></a></li>
								<li><a href="../../html/ui/buttons.html" ><span class="title">Buttons</span></a></li>
								<li><a href="../../html/ui/lists.html" ><span class="title">Lists</span></a></li>
								<li><a href="../../html/ui/tabs.html" ><span class="title">Tabs</span></a></li>
								<li><a href="../../html/ui/accordions.html" ><span class="title">Accordions</span></a></li>
								<li><a href="../../html/ui/messages.html" ><span class="title">Messages</span></a></li>
								<li><a href="../../html/ui/offcanvas.html" ><span class="title">Off-canvas</span></a></li>
								<li><a href="../../html/ui/grid.html" ><span class="title">Grid</span></a></li>
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Icons</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/ui/icons/materialicons.html" ><span class="title">Material Design Icons</span></a></li>
										<li><a href="../../html/ui/icons/fontawesome.html" ><span class="title">Font Awesome</span></a></li>
										<li><a href="../../html/ui/icons/glyphicons.html" ><span class="title">Glyphicons</span></a></li>
										<li><a href="../../html/ui/icons/skycons.html" ><span class="title">Skycons</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END UI -->

						<!-- BEGIN TABLES -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="fa fa-table"></i></div>
								<span class="title">Tables</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/tables/static.html" ><span class="title">Static Tables</span></a></li>
								<li><a href="../../html/tables/dynamic.html" ><span class="title">Dynamic Tables</span></a></li>
								<li><a href="../../html/tables/responsive.html" ><span class="title">Responsive Table</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END TABLES -->

						<!-- BEGIN FORMS -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><span class="glyphicon glyphicon-list-alt"></span></div>
								<span class="title">Forms</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/forms/basic.html" ><span class="title">Form basic</span></a></li>
								<li><a href="../../html/forms/advanced.html" ><span class="title">Form advanced</span></a></li>
								<li><a href="../../html/forms/layouts.html" ><span class="title">Form layouts</span></a></li>
								<li><a href="../../html/forms/editors.html" ><span class="title">Editors</span></a></li>
								<li><a href="../../html/forms/validation.html" ><span class="title">Form validation</span></a></li>
								<li><a href="../../html/forms/wizard.html" ><span class="title">Form wizard</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END FORMS -->

						<!-- BEGIN PAGES -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="md md-computer"></i></div>
								<span class="title">Pages</span>
							</a>
							<!--start submenu -->
							<ul>
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Contacts</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/contacts/search.html" ><span class="title">Search</span></a></li>
										<li><a href="../../html/pages/contacts/details.html" ><span class="title">Contact card</span></a></li>
										<li><a href="../../html/pages/contacts/add.html" ><span class="title">Insert contact</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Search</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/search/results-text.html" ><span class="title">Results - Text</span></a></li>
										<li><a href="../../html/pages/search/results-text-image.html" ><span class="title">Results - Text and Image</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Blog</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/blog/masonry.html" ><span class="title">Blog masonry</span></a></li>
										<li><a href="../../html/pages/blog/list.html" ><span class="title">Blog list</span></a></li>
										<li><a href="../../html/pages/blog/post.html" ><span class="title">Blog post</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Error pages</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/404.html" ><span class="title">404 page</span></a></li>
										<li><a href="../../html/pages/500.html" ><span class="title">500 page</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li><a href="../../html/pages/profile.html" ><span class="title">User profile<span class="badge style-accent">42</span></span></a></li>
								<li><a href="../../html/pages/invoice.html" ><span class="title">Invoice</span></a></li>
								<li><a href="../../html/pages/calendar.html" ><span class="title">Calendar</span></a></li>
								<li><a href="../../html/pages/pricing.html" ><span class="title">Pricing</span></a></li>
								<li><a href="../../html/pages/timeline.html" ><span class="title">Timeline</span></a></li>
								<li><a href="../../html/pages/maps.html" ><span class="title">Maps</span></a></li>
								<li><a href="../../html/pages/locked.html" ><span class="title">Lock screen</span></a></li>
								<li><a href="../../html/pages/login.html" ><span class="title">Login</span></a></li>
								<li><a href="../../html/pages/blank.html" ><span class="title">Blank page</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END FORMS -->

						<!-- BEGIN CHARTS -->
						<li>
							<a href="../../html/charts/charts.html" >
								<div class="gui-icon"><i class="md md-assessment"></i></div>
								<span class="title">Charts</span>
							</a>
						</li><!--end /menu-li -->
						<!-- END CHARTS -->

						<!-- BEGIN LEVELS -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="fa fa-folder-open fa-fw"></i></div>
								<span class="title">Menu levels demo</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="#"><span class="title">Item 1</span></a></li>
								<li><a href="#"><span class="title">Item 1</span></a></li>
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Open level 2</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="#"><span class="title">Item 2</span></a></li>
										<li class="gui-folder">
											<a href="javascript:void(0);">
												<span class="title">Open level 3</span>
											</a>
											<!--start submenu -->
											<ul>
												<li><a href="#"><span class="title">Item 3</span></a></li>
												<li><a href="#"><span class="title">Item 3</span></a></li>
												<li class="gui-folder">
													<a href="javascript:void(0);">
														<span class="title">Open level 4</span>
													</a>
													<!--start submenu -->
													<ul>
														<li><a href="#"><span class="title">Item 4</span></a></li>
														<li class="gui-folder">
															<a href="javascript:void(0);">
																<span class="title">Open level 5</span>
															</a>
															<!--start submenu -->
															<ul>
																<li><a href="#"><span class="title">Item 5</span></a></li>
																<li><a href="#"><span class="title">Item 5</span></a></li>
															</ul><!--end /submenu -->
														</li><!--end /submenu-li -->
													</ul><!--end /submenu -->
												</li><!--end /submenu-li -->
											</ul><!--end /submenu -->
										</li><!--end /submenu-li -->
									</ul><!--end /submenu -->
								</li><!--end /submenu-li -->
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END LEVELS -->

					</ul><!--end .main-menu -->
					<!-- END MAIN MENU -->

					<div class="menubar-foot-panel">
						<small class="no-linebreak hidden-folded">
							<span class="opacity-75">Copyright &copy; 2014</span> <strong>CodeCovers</strong>
						</small>
					</div>
				</div><!--end .menubar-scroll-panel-->
			</div><!--end #menubar-->
			<!-- END MENUBAR -->

			<!-- BEGIN OFFCANVAS RIGHT -->
			<div class="offcanvas">

				<!-- BEGIN OFFCANVAS SEARCH -->
				<div id="offcanvas-search" class="offcanvas-pane width-8">
					<div class="offcanvas-head">
						<header class="text-primary">Search</header>
						<div class="offcanvas-tools">
							<a class="btn btn-icon-toggle btn-default-light pull-right" data-dismiss="offcanvas">
								<i class="md md-close"></i>
							</a>
						</div>
					</div>
					<div class="offcanvas-body no-padding">
						<ul class="list ">
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>A</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar4.jpg?1404026791" alt="" />
									</div>
									<div class="tile-text">
										Alex Nelson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar9.jpg?1404026744" alt="" />
									</div>
									<div class="tile-text">
										Ann Laurens
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>J</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar2.jpg?1404026449" alt="" />
									</div>
									<div class="tile-text">
										Jessica Cruise
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar8.jpg?1404026729" alt="" />
									</div>
									<div class="tile-text">
										Jim Peters
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>M</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar5.jpg?1404026513" alt="" />
									</div>
									<div class="tile-text">
										Mabel Logan
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar11.jpg?1404026774" alt="" />
									</div>
									<div class="tile-text">
										Mary Peterson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar3.jpg?1404026799" alt="" />
									</div>
									<div class="tile-text">
										Mike Alba
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>N</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar6.jpg?1404026572" alt="" />
									</div>
									<div class="tile-text">
										Nathan Peterson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>P</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar7.jpg?1404026721" alt="" />
									</div>
									<div class="tile-text">
										Philip Ericsson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>S</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar10.jpg?1404026762" alt="" />
									</div>
									<div class="tile-text">
										Samuel Parsons
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
						</ul>
					</div><!--end .offcanvas-body -->
				</div><!--end .offcanvas-pane -->
				<!-- END OFFCANVAS SEARCH -->

				<!-- BEGIN OFFCANVAS CHAT -->
				<div id="offcanvas-chat" class="offcanvas-pane style-default-light width-12">
					<div class="offcanvas-head style-default-bright">
						<header class="text-primary">Chat with Ann Laurens</header>
						<div class="offcanvas-tools">
							<a class="btn btn-icon-toggle btn-default-light pull-right" data-dismiss="offcanvas">
								<i class="md md-close"></i>
							</a>
							<a class="btn btn-icon-toggle btn-default-light pull-right" href="#offcanvas-search" data-toggle="offcanvas" data-backdrop="false">
								<i class="md md-arrow-back"></i>
							</a>
						</div>
						<form class="form">
							<div class="form-group floating-label">
								<textarea name="sidebarChatMessage" id="sidebarChatMessage" class="form-control autosize" rows="1"></textarea>
								<label for="sidebarChatMessage">Leave a message</label>
							</div>
						</form>
					</div>
					<div class="offcanvas-body">
						<ul class="list-chats">
							<li>
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
									<div class="chat-body">
										Yes, it is indeed very beautiful.
										<small>10:03 pm</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li class="chat-left">
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar9.jpg?1404026744" alt="" /></div>
									<div class="chat-body">
										Did you see the changes?
										<small>10:02 pm</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li>
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
									<div class="chat-body">
										I just arrived at work, it was quite busy.
										<small>06:44pm</small>
									</div>
									<div class="chat-body">
										I will take look in a minute.
										<small>06:45pm</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li class="chat-left">
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar9.jpg?1404026744" alt="" /></div>
									<div class="chat-body">
										The colors are much better now.
									</div>
									<div class="chat-body">
										The colors are brighter than before.
										I have already sent an example.
										This will make it look sharper.
										<small>Mon</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li>
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
									<div class="chat-body">
										Are the colors of the logo already adapted?
										<small>Last week</small>
									</div>
								</div><!--end .chat -->
							</li>
						</ul>
					</div><!--end .offcanvas-body -->
				</div><!--end .offcanvas-pane -->
				<!-- END OFFCANVAS CHAT -->

			</div><!--end .offcanvas-->
			<!-- END OFFCANVAS RIGHT -->

		</div><!--end #base-->
		<!-- END BASE -->

		<!-- BEGIN JAVASCRIPT -->
		<script src="../../assets/js/libs/jquery/jquery-1.11.2.min.js"></script>
		<script src="../../assets/js/libs/jquery/jquery-migrate-1.2.1.min.js"></script>
		<script src="../../assets/js/libs/bootstrap/bootstrap.min.js"></script>
		<script src="../../assets/js/libs/spin.js/spin.min.js"></script>
		<script src="../../assets/js/libs/autosize/jquery.autosize.min.js"></script>
		<script src="../../assets/js/libs/nanoscroller/jquery.nanoscroller.min.js"></script>
		<script src="../../assets/js/core/source/App.js"></script>
		<script src="../../assets/js/core/source/AppNavigation.js"></script>
		<script src="../../assets/js/core/source/AppOffcanvas.js"></script>
		<script src="../../assets/js/core/source/AppCard.js"></script>
		<script src="../../assets/js/core/source/AppForm.js"></script>
		<script src="../../assets/js/core/source/AppNavSearch.js"></script>
		<script src="../../assets/js/core/source/AppVendor.js"></script>
		<script src="../../assets/js/core/demo/Demo.js"></script>
		<!-- END JAVASCRIPT -->

	</body>
</html>
